﻿@model PhotoGallery.Models.ViewModels.VideoViewModel
@using PhotoGallery.Views
@{
    ViewBag.Title = "Create";
}
@section javascript{
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <link href="@Url.Content("~/Content/FileUpload.css")" rel="stylesheet" />

    <script src="@Url.Content("~/Scripts/InputTypeFile.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/InputTypeFile.css")" rel="stylesheet" />
}
<h2>@Labels.add</h2>
@using (Html.BeginForm("Create","Video",FormMethod.Post,new {id="formUpload", enctype = "multipart/form-data"})) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>@Labels.video</legend>

        <div class="editor-label">
            @Labels.uploadVideo:<br>
        </div>
        <div class="editor-field">
            <div class="styleFileInput">        
                <input type="text" class="browseText" style="display:none;" /> 
                <input type="button" value="Browse" class="browseButton" style="display:none;"/> 
                <input type="file" name="files"  accept="video/*" class="theFileInput"  />
            </div>

        </div>
        @if (!@Model.Video.AutoGenerateThumnnails)
        {
            <div class="editor-label">
                @Labels.uploadThumbnail:<br>
            </div>
            <div class="editor-field">
                <input type="file" name="thummnail"  accept="image/*" />
            </div>
        }

        <div class="editor-label">
            @Html.LabelFor(model => model.Video.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Video.Title)
            @Html.ValidationMessageFor(model => model.Video.Title)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Video.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Video.Description)
            @Html.ValidationMessageFor(model => model.Video.Description)
        </div>
        <p>
            <input id="btnUpload" type="submit" value="@Labels.save" />
            <a href="@Html.Encode(@Html.Encode(ViewBag.backUrl))"  class="button-link-100" >@Labels.cancel </a>
        </p>
    </fieldset>
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
}
<script>
(function() {
    

@*//$('#formUpload').validate();

//$('#btnUpload').click(function () {
//    alert($('#formUpload').validate().form());
    return false;
//});
   
//$.validator.messages = {
//    required: "@Messages.hello"
//};*@


var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xhr) {
	    status.html(xhr.responseText);
	    window.location = '@Url.Action("Index")'
	}
}); 

})();       
</script>
